{include file="common/header"}
<div id="app" v-cloak>
    <el-curd 
        ref="curd" 
        :search-init="false" 
        :field="field"
        :table-sort="{prop: 'create_time', order: 'desc'}"
        search-keyword="根据评论内容/新闻标题/用户ID搜索">
        <template v-slot:search>
            <div class="el-search-item">
                <div class="label">指定博客：</div>
                <div class="value">
                    <el-select
                        v-model="news_id"
                        filterable
                        remote
                        placeholder="搜索指定新闻"
                        :remote-method="remoteMethod"
                        clearable>
                        <el-option
                            v-for="item in news"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </template>
    </el-curd>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                news: [],
                news_id: window.location.hash === "" ? '' : Number(window.location.hash.replace('#', '')),
                field: [
                    {
                        prop: 'id', 
                        label: '编号', 
                        table: false,
                    },
                    {
                        prop: 'news_cover', 
                        label: '', 
                        table: {
                            is: 'el-image',
                            width: '60px'
                        }
                    },
                    {
                        prop: 'news_title', 
                        label: '新闻标题', 
                        table: {sort: true},
                    },
                    {
                        prop: 'user_id', 
                        label: '用户',
                        table: {prop: 'user', is: 'object', child: ['email','mobile'], sort: true},
                        form: false,
                    },
                    {
                        prop: 'content', 
                        label: '评论内容',
                        table: {sort: true},
                    },
                    {
                        prop: 'create_time', 
                        label: '评论日期', 
                        table: {sort: true},
                    },
                ],
            }
        },
        created() {
	        this.$nextTick(()=>{
	            this.$refs.curd.search = Object.assign({}, this.$refs.curd.search, {page: 1, news_id: this.news_id});
	        });
	        this.remoteMethod('', this.news_id);
	    },
	    methods: {
            /**
             * 远程搜索
             */
            remoteMethod(query = '', news_id = '') {
                if (query !== '' || news_id !== '') {
                    let self = this;
                    let search = {keyword: query};
                    if (news_id != '') {
                        search.news_id = news_id;
                    }
                    request.post('cms/news/index', search, function(res){
                        if (res.status === 'success') {
                            self.news = res.data;
                        } else {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        }
                    });
                } else {
                    self.news = [];
                }
            },
        },
        watch: {
            news_id(v) {
                this.$refs.curd.search = Object.assign({}, this.$refs.curd.search, {page: 1, news_id: this.news_id});
                window.top.location.hash = parent.parentVm.path.split('#')[0];
            }
        }
    });
</script>
{include file="common/footer"}